<template>
  <div>
    <!-- 文本框/多行文本框 -->
    <div v-if="(inputType2 === 'text' || inputType2 === 'textarea') && (inputType === 'text')">
      <el-input
        :type="inputType2 === 'textarea' ? 'textarea' : 'text'"
        placeholder=""
        size="mini"
        v-model="formData.value"
        clearable>
      </el-input>
    </div>

    <!-- 两者之间的文本 -->
    <div v-if="inputType2 === 'between' && inputType === 'text'">
      <el-input
        placeholder=""
        size="mini"
        style="width: 120px"
        v-model="formData.value1"
        clearable>
      </el-input>
      ~
      <el-input
        placeholder=""
        size="mini"
        style="width: 120px"
        v-model="formData.value2"
        clearable>
      </el-input>
    </div>

    <!-- 时间选择 -->
    <div v-if="inputType === 'time' && inputType2 === 'text'">
      <el-date-picker
        v-model="formData.value"
        type="date"
        size="mini"
        clearable
        placeholder="选择日期">
      </el-date-picker>
    </div>

    <!-- 两者之间的时间 -->
    <div v-if="inputType2 === 'between' && inputType === 'time'">
      <el-date-picker
        v-model="formData.value1"
        type="date"
        size="mini"
        clearable
        style="width: 120px"
        placeholder="选择日期">
      </el-date-picker>
      ~
      <el-date-picker
        v-model="formData.value2"
        type="date"
        size="mini"
        clearable
        style="width: 120px"
        placeholder="选择日期">
      </el-date-picker>
    </div>

    <!-- 下拉框 -->
    <div v-if="inputType2 === 'select'">
      <el-select v-model="formData.value" size="mini" clearable placeholder="请选择">
        <el-option
          v-for="item in optionsData"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>

    <!-- 单选 -->
    <div v-if="inputType2 === 'radio'">
      <el-radio v-model="formData.value" label="1">{{radioData[0]}}</el-radio>
      <el-radio v-model="formData.value" label="2">{{radioData[1]}}</el-radio>
    </div>
  </div>
</template>

<script>
import util from '@/utils/util'
export default {
  props: {
    // 传入的第一个下拉框的数据类型
    inputType: {
      type: String,
      default: 'text'
    },
    // 传入的第二个下拉框的数据类型
    inputType2: {
      type: String,
      default: 'text'
    },
    // 数据类型为下拉框时的数据
    optionsData: {
      type: Array,
      default: () => []
    },
    // 为单选时的数据
    radioData: {
      type: Array,
      default: () => ['空值', '非空值']
    }
  },
  data() {
    return {
      formData: {
        value: '',
        value1: '',
        value2: ''
      },
      emitValue: ''
    }
  },
  updated() {
    // 先清空数据
    this.formData.value = this.formData.value.toString()
    // 数据变化时，回传给父组件
    this.$nextTick(function() {
      // 如果输入框中的数据为日期，则格式化日期格式
      if (this.inputType === 'time') {
        this.formData.value = this.formData.value ? util.formatTimeToStr(this.formData.value, 'yyyy-MM-dd') : ''
        this.formData.value1 = this.formData.value1 ? util.formatTimeToStr(this.formData.value1, 'yyyy-MM-dd') : ''
        this.formData.value2 = this.formData.value2 ? util.formatTimeToStr(this.formData.value2, 'yyyy-MM-dd') : ''
      }
      if (this.inputType2 === 'between') {
        this.emitValue = this.formData.value1 + '-' + this.formData.value2
      } else {
        this.emitValue = this.formData.value
      }
      this.$emit('changeValue', this.emitValue)
    })
  },
  methods: {
    init(data) {
      // 修改时传入的数据
      if (data) {
        this.$$nextTick(() => {
          this.formData.value = data
        })
      } else {
        this.formData.value = ''
        this.formData.value1 = ''
        this.formData.value2 = ''
      }
    }
  }
}
</script>
